<template>
  <div class="container infodetail">
    <UserSidebar />
    <div class="infodetail-frame">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="Experience details" name="0">
          <div class="right-panel">
            <el-date-picker
              v-model="exp.form.month"
              type="month"
              placeholder="Select month"
              @change="getExpList"
            >
            </el-date-picker>
            <div class="panel" v-loading="exp.loading">
              <p
                class="panel-p"
                v-for="(item, index) in exp.list"
                :key="'exp' + index"
              >
                {{ item.created_at }} {{ item.describe }}
                {{ parseInt(item.experience) }}
              </p>
              <Nodata v-if="exp.list.length == 0 && !exp.loading" />
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="Points details" name="1">
          <div class="right-panel">
            <el-date-picker
              v-model="point.form.month"
              type="month"
              placeholder="Select month"
              @change="getPointList"
            >
            </el-date-picker>
            <div class="panel" v-loading="point.loading">
              <p
                class="panel-p"
                v-for="(item, index) in point.list"
                :key="'point' + index"
              >
                {{ item.created_at }} {{ item.describe }}
                {{ item.point }}
              </p>
              <Nodata v-if="point.list.length == 0 && !exp.loading" />
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>
import tool from "@/common/tool";
export default {
  data() {
    return {
      tool,
      activeName: "0",
      exp: {
        loading: true,
        list: [],
        form: {
          month: tool.getLocalTimeryyyym(),
          page: 1,
          page_size: 100000,
        },
      },
      point: {
        loading: true,
        list: [],
        form: {
          month: tool.getLocalTimeryyyym(),
          page: 1,
          page_size: 100000,
        },
      },
    };
  },
  mounted() {
    this.getExpList();
    this.getPointList();
  },
  methods: {
    //点击分页
    handleClick(tab, event) {
      //console.log(tab, event);
    },
    //获取会员经验明细
    async getExpList() {
      this.exp.loading = true;
      this.exp.list = [];
      let res = await this.$store.dispatch(
        "user/accountExpList",
        this.exp.form
      );
      console.log(res);
      if (res.code == 0 && res.data != undefined) {
        this.exp.list = res.data.list;
      }
      this.exp.loading = false;
    },
    //获取会员积分明细
    async getPointList() {
      this.point.loading = true;
      let res = await this.$store.dispatch(
        "user/accountPointList",
        this.point.form
      );
      if (res.code == 0 && res.data != undefined) {
        this.point.list = res.data.list;
      }
      this.point.loading = false;
    },
  },
};
</script>
<style lang="less" scoped>
@import "infodetail.less";
</style>